import { defineStore } from 'pinia'
import { ref } from 'vue'
import { topCategory } from '@/api/constants'
import { findAllCategory } from '@/api/category'

export const useCategoryStore = defineStore('xtx-category', () => {
  // 通过默认是[]数组，看不见默认的9个分类，等你数据加载完毕才会看到
  // 所以：根据常量数据来生成一个默认的页面顶级分类数据，不会出现空白（没有数据的情况）
    const list = topCategory.map(item => ({name: item}))

    const categoryList = ref(list)

    // 需要向后台加载数据
    const getCategoryList = async () => {
        const { result } = await findAllCategory()
        // 给以及分类加上一个控制二级分类显示隐藏的数据open
        result.forEach(item => {
            item.open = false
        })
        categoryList.value = result
    }

    // 修改当前一级分类下的open数据为true
    const show = (id) => {
        const category = categoryList.value.find(item => item.id === id)
        category.open = true
    }

    // 修改当前一级分类下的open数据为false
    const hide = (id) => {
        const category = categoryList.value.find(item => item.id === id)
        category.open = false
    }

    return { categoryList, getCategoryList, show, hide }
})